<template>
  <slot></slot>
</template>

<script setup>
import { ElLoading } from 'element-plus'
import { watch } from 'vue'

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  text: {
    type: String,
    default: '加载中...'
  },
  background: {
    type: String,
    default: 'rgba(255, 255, 255, 0.8)'
  }
})

let loadingInstance = null

watch(() => props.loading, (newVal) => {
  if (newVal) {
    loadingInstance = ElLoading.service({
      lock: true,
      text: props.text,
      background: props.background,
    })
  } else {
    loadingInstance?.close()
  }
}, { immediate: true })
</script> 